<template>
  <div>
    <a-button class="returns" v-if="type !== 'index'" @click="pagetabTag('index')">返回</a-button>
    <Filling v-if="type === 'filling'" />
    <Mention v-if="type === 'mention'" />
    <Manage v-if="type === 'manage'" />
    <Msglist v-if="type === 'msglist'" />
    <Bindzfb :v="v" @close="close" />
    <div v-if="type === 'index'">
      <a-row type="flex" justify="space-between" class="w-box">
        <a-col :span="24" class="n">我的钱包</a-col>
        <a-col :span="13">
          <a-list itemLayout="horizontal" :dataSource="list">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta>
                <img slot="avatar" src="~/static/msg.jpg" />
                <a-row slot="title" type="flex" justify="space-between">
                  <a-col :span="20">{{item.name}}</a-col>
                  <a-col :span="4">{{item.value}}元</a-col>
                </a-row>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-col>
        <a-col :span="10" class="echarts">
          <div class="echarts-t">
            <a-col :span="24">账户：{{phone}}</a-col>
            <a-col :span="20"></a-col>
            <a-col :span="4">
              <a-button type="link" @click="pagetabTag('manage')">管理</a-button>
            </a-col>
          </div>

          <div id="myChart"></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { MY_INFO, FINANCIAL_DETAILS } from "../server";
const columns = [
  {
    title: "商品",
    dataIndex: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "单价（元）",
    dataIndex: "age",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "数量",
    dataIndex: "address",
    scopedSlots: { customRender: "address" }
  },
  {
    title: "实付款（元）",
    dataIndex: "address1",
    scopedSlots: { customRender: "address1" }
  },
  {
    title: "订单状态",
    dataIndex: "address2",
    scopedSlots: { customRender: "address2" }
  }
];

const data = [];
for (let i = 0; i < 3; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: { a: 2 },
    address: `London, Park Lane no. ${i}`
  });
}
export default {
  layout: "main",
  components: {
    Manage: () => import("~/components/wallet/manage")
  },
  data() {
    return {
      type: "index",
      v: false,
      arrSelect: [
        { key: 0, val: "全部" },
        { key: 1, val: "账号" }
      ],
      data,
      columns,
      list: [
        {
          name: "收款中",
          value: 0
        },
        {
          name: "付款中",
          value: 0
        }
      ],
      phone: ""
    };
  },
  created() {
    this.getDetails();
    this.getInfo();
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    onSearch() {},
    handleChange() {},
    pagetabTag(n) {
      switch (n) {
        case "index":
          this.type = n;
          this.echartsInit();
          break;
        case "mention":
          this.echartsInit();
          if (this.getBindZFB()) {
            this.type = n;
          } else {
            this.$confirm({
              title: "您尚未绑定可用于提现的支付宝账户",
              cancelText: "稍后再说",
              okText: "绑定支付宝",
              onOk: () => {
                this.v = true;
              },
              onCancel() {},
              class: "test"
            });
          }
          break;
        default:
          this.type = n;
          break;
      }
    },
    getBindZFB() {
      //  MY_INFO().then(res => {
      //   if (!res) {
      //     return;
      //   } else {
      //     let v;
      //     res.zfb_name ? (v = true) : (v = false);
      //     return v;
      //   }
      // });
      return false;
    },
    close() {
      this.v = false;
    },
    getInfo() {
      MY_INFO().then(res => {
        if (!res) return;
        this.list[0].money = res.data.payment_money;
        this.list[1].money = res.data.collection_money;
        this.phone = res.data.phone;
      });
    },
    getDetails() {
      FINANCIAL_DETAILS({
        type: "all"
      }).then(res => {
        if (res) {
        } else {
          // this.list = [];
        }
      });
    },
    echartsInit() {
      // 找到容器
      this.$nextTick(() => {
        let myChart = this.$echarts.init(document.getElementById("myChart"));
        // 开始渲染
        myChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: ["收款中", "付款中"]
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: this.list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              tooltip: {
                formatter: "{b0}: ￥{c0}元"
              }
            }
          ]
        });
      });
    }
  }
};
</script>
<style lang="less" scoped>
.w-box {
  border: 1px solid #dadada;
  padding: 0 20px 20px 20px;
  .n {
    font-size: 16px;
    margin: 20px;
  }
  .ye {
    height: 104px;
    background-color: #f3f3f3;
    padding: 22px;
    .money {
      font-size: 32px;
      span {
        color: #ff6000;
      }
    }
    .ybtn {
      padding-top: 20px;
    }
  }
  &/deep/.ant-list-item {
    padding: 32px 12px;
    .ant-list-item-meta-content {
      margin-top: 6px;
    }
  }
  .echarts {
    border: 1px solid #dadada;
    padding: 20px;
    .echarts-t {
      height: 58px;
      border-bottom: 1px solid #dadada;
    }
    #myChart {
      width: 354px;
      height: 300px;
      margin-top: 10px;
    }
  }
}
.table {
  margin-top: 20px;
  .table-n {
    width: 300px;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .table-img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
// .pagination {
//   margin: 100px auto;
//   text-align: center;
// }
.returns {
  margin-bottom: 12px;
}
</style>